<template>
  <div :class="indivClass">
    <!-- 轮播图部分 -->
    <Swiper :banner="banner"></Swiper>
    <!-- 推荐歌单部分 -->
    <h4
      :class="[
        `dance-music-indivi-h4`,
        `dance-music-indivi-h4-${$store.getters.getTheme}`
      ]"
    >
      推荐歌单
    </h4>
    <music-list :musiclist="musiclist"></music-list>
    <!-- 独家放送 -->
    <private-content :pri="PrivateContent"></private-content>
    <!-- 最新音乐 -->
    <new-songs :songlist="newsong"></new-songs>
  </div>
</template>
<script>
import Swiper from '../../components/Swiper/Swiper.vue'
import musicList from '../../components/Musiclist/Musiclist.vue'
import privateContent from './childsComps/privateContent.vue'
import newSongs from './childsComps/newSongs.vue'

import {
  _getBanner,
  _getPersonalized,
  _getPrivateContent,
  _getNewSong
} from '../../network/individuation'
export default {
  data () {
    return {
      banner: null, //轮播图
      musiclist: [], //推荐歌单
      PrivateContent: null, //独家放送
      newsong: [] //最新歌曲
    }
  },
  components: {
    Swiper,
    musicList,
    privateContent,
    newSongs
  },
  created () {
    // 获取banner接口
    _getBanner().then(res => {
      console.log(res)
      this.banner = res.data.banners
    })
    // 获取推荐歌单
    _getPersonalized(10).then(res => {
      console.log(res)
      this.musiclist = res.data.result
    })
    // 独家放送
    _getPrivateContent().then(res => {
      console.log(res)
      this.PrivateContent = res.data
    })
    // 获取最新歌曲
    _getNewSong().then(res => {
      console.log(res)
      this.newsong = res.data.result
    })
  },
  computed: {
    indivClass () {
      return [
        `dance-music-indivi`,
        `dance-music-indivi-${this.$store.getters.getTheme}`
      ]
    }
  }
}
</script>
<style lang="less">
.dance-music-indivi {
  width: 100%;
  height: 100%;
  // 推荐歌单标题的主题
  &-h4-dark {
    color: var(--dark-text-color);
  }
}
</style>
